<template>
	<view class="content">
		<view class="header">

			<u-form labelPosition="left" ref="uForm" labelWidth="70">
				<u-form-item label="头像" prop="username" borderBottom>
					<block v-if="info.avatar == '' || info.avatar == 'null'">
						<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/avater-default.png"
							class="avatarUrl" mode="" @click="getState" />
					</block>
					<block v-else>
						<image :src="info.avatar" class="avatarUrl" mode="" @click="getState" />
					</block>
				</u-form-item>

				<u-form-item label="昵称" prop="username" borderBottom>
					<u--input v-model="info.name" border="none" placeholder="请输入昵称" />
				</u-form-item>

				<u-form-item label="性别" prop="gender" borderBottom>
					<view class="checkedgender">
						<view v-for="(item, index) in genderList" :key="index" class="card" @click="onCheckd(item)"
							:class="info.gender == item.id ? 'card-active' : ''">
							<u-icon :name="item.id == 0 ? 'man' : 'woman'" size="25rpx" />
							<text>{{ item.label }}</text>
						</view>
					</view>
				</u-form-item>

				<u-form-item label="手机号" prop="phone" borderBottom>
					<u--input v-model="info.phone" border="none" placeholder="请输入手机号" />
				</u-form-item>

				<u-form-item label="生日" prop="birthday">
					<u--input v-model="info.birthday" border="none" placeholder="请选择生日" @click="show = true"
						@focus="show = true" />
				</u-form-item>
			</u-form>

		</view>
		<view class="flooter">
			<view class="flooter_btn" @click="openUnbindConfirm"> 保存 </view>
		</view>
		<u-datetime-picker :show="show" v-model="datetimeValue" mode="date" confirmColor="#32B499" @cancel="show = false"
			@confirm="handleConfirm"></u-datetime-picker>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/common/auth';

	export default {
		data() {
			return {
				userId: getUserInfo().ypdUser?.userId,
				show: false,
				datetimeValue: Number(new Date()),
				fileList: [],
				info: {
					avatar: '',
					name: '',
					gender: 1,
					phoneNumber: '',
					birthday: ''
				},
				genderList: [{
						label: '男',
						id: 1
					},
					{
						label: '女',
						id: 0
					}
				],
				checked: false,
				mode: '',
				dateVisible: false,
				date: new Date('2021-12-23').getTime(), // 支持时间戳传入
				dateText: '',
				// 指定选择区间起始值
				start: '1900-01-01 00:00:00',
				end: '2030-12-31 00:00:00',
				userInfo: {}
			}
		},
		onLoad(options) {
			// const userInfo = JSON.parse(options.userInfo);
			// userInfo.avatar = decodeURIComponent(userInfo.avatar) || '';
			// this.info = userInfo
			this.getUserInfo();
		},
		methods: {
			async getState() {
				// #ifdef APP-PLUS 
				let result = await this.$store.dispatch("requestPermissions", 'WRITE_EXTERNAL_STORAGE')
				if (result !== 1) return
				// #endif 
				this.chooseImg()
			},
			async getUserInfo() {
				const {
					userId
				} = this;
				const {
					data
				} = await this.$request.miniGetUserInfo({
					userId
				})
				this.info = data
			},
			// 切换性别
			onCheckd(item) {
				console.log(item)
				this.info.gender = item.id
			},
			chooseImg() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res)
						let tempAvatar = res.tempFilePaths[0];
						that.uploadImage(tempAvatar);
					}
				});
			},
			async uploadImage(tempAvatar) {
				try {
					if (tempAvatar) {
						// 上传新头像
						let result = await this.$tools.uploadImage(tempAvatar)
						this.info.avatar = result.data
						console.log(this.info.avatar)
					}
				} catch (error) {
					if (error.errMsg === 'chooseImage:fail cancel') return this.$toast('修改头像出错了');
				}
			},
			//选择日期
			handleConfirm(e) {
				const timeFormat = uni.$u.timeFormat
				this.info.birthday = timeFormat(e.value, 'yyyy-mm-dd');
				this.show = false;
			},
			//提交
			openUnbindConfirm() {
				const {
					info,
					userId
				} = this;
				let reg = new RegExp(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/);
				if (!reg.test(info.phone)) return this.$toast('请填写正确的手机号')

				uni.setStorageSync('phone', info.phone);
				uni.setStorageSync('userName', info.name);

				const param = {
					name: info.name,
					avatar: info.avatar == 'null' ? '' : info.avatar,
					birthday: info.birthday,
					gender: info.gender,
					phone: info.phone,
					userId
				};
				this.$request.miniUpdateUserInfo(param).then(res => {
					if (res.code == 200) {
						this.$toast('修改成功!');
						setTimeout(() => {
							this.$goPath(1)
						}, 1000)
					}
				})
			},

		},
	}
</script>
<style scoped lang="scss">
	.content {
		width: 100%;
		margin-top: 24rpx;

		.header {
			width: 720rpx;
			margin: 0 auto;
			background-color: #fff;
			padding: 36rpx;

			.avatarUrl {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.u-form-item {
				line-height: 40px;
			}

			.checkedgender {
				display: flex;

				.card {
					font-size: 24rpx;
					width: 120rpx;
					height: 40rpx;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					border: 2rpx solid #999999;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 15rpx;
				}

				.card-active {
					border: 2rpx solid #32B499;
					color: #32B499;
				}
			}
		}

		.flooter {
			width: 100%;
			padding: 0 32rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			align-self: center;
			justify-content: center;

			.flooter_btn {
				width: 500rpx;
				background-color: #32B499;
				border-radius: 48rpx;
				padding: 18rpx 0;
				display: flex;
				align-self: center;
				justify-content: center;
				color: #fff;
			}
		}
	}
</style>